<?xml version="1.0" encoding="UTF-8"?>

<!--
    Document   : account.xsl.xsl
    Created on : August 31, 2013, 10:10 AM
    Author     : Tung An
    Description:
        Purpose of transformation follows.
-->

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html"/>

    <!-- TODO customize transformation rules 
         syntax recommendation http://www.w3.org/TR/xslt 
    -->
    <xsl:template match="/">
        <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="account">
        <xsl:choose>
            <xsl:when test=". != ''">
                <div class="account-info" data="account-info">
                    <div class="avatar">
                        <xsl:if test="avatarurl != ''">
                            <img src="{avatarurl}"/>
                        </xsl:if>
                        <xsl:if test="avatarurl = ''">
                            <img src="/images/default_avatar.png"/>
                        </xsl:if>
                    </div>
                    <div class="username" id="{userid}">
                        <span>
                            <xsl:value-of select="username"/>
                        </span>
                        <img src="./images/icon/arrow-down-icon.png"/>
                    </div>
                    <div class="account-menu box hide">
                        <div class="inline avatar">
                            <xsl:if test="avatarurl != ''">
                                <img src="{avatarurl}"/>
                            </xsl:if>
                            <xsl:if test="avatarurl = ''">
                                <img src="/images/default_avatar.png"/>
                            </xsl:if>
                        </div>
                        <div class="inline info">
                            <div name="username" class="full-name">
                                <xsl:value-of select="username"/>
                            </div>
                            <div name="email" class="email">
                                <xsl:value-of select="email"/>
                            </div>
                            <div class="button" data="manage">Manage looks</div>
                        </div>
                        <div class="bottom">
                            <div data="log-out">Log out</div>
                        </div>
                    </div>
                </div>
            </xsl:when>
            <xsl:otherwise>
                <div data="gologin" class="button">Sign in</div>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>
</xsl:stylesheet>
